

<template>
  <div class="UserListRedact-mokuai">
      <div class="accounts-index">
        <div class="accounts-name">
          <div class="accounts-name-font">验证码设置</div>
        </div>
        <div class="UserListRedact-content">
         
        
          <!-- 用户设置 -->
          <div class="codeSet-setting">
            <el-form
              :model="verificationCode"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="170px"
              class="demo-ruleForm">
              <el-form-item label="启用验证码:" prop="enableVerification">
           
  <el-checkbox-group v-model="verificationCode.enableVerification">
    <el-checkbox label="新用户注册"></el-checkbox>
    <el-checkbox label="用户登录"></el-checkbox>
    <el-checkbox label="发表相关评论"></el-checkbox>
   <el-checkbox label="后台系统登录"></el-checkbox>
  </el-checkbox-group>
  <div class="font-size">启用验证码可以避免恶意批量评论或提交信息，推荐打开验证码功能。注意: 启用验证码会使得部分操作变得繁琐，建议仅在必需时打开</div>

              </el-form-item>

                <el-form-item label="登录失败时显示验证码:" prop="loginFailure">
              
  <el-radio v-model="verificationCode.loginFailure" label="关闭">关闭</el-radio>
  <el-radio v-model="verificationCode.loginFailure" label="开启">开启</el-radio>
<div class="font-size">选择“是”将在用户登录失败 3 次后才显示验证码，选择“否”将始终在登录时显示验证码。注意: 只有在启用了用户登录验证码时本设置才有效</div>
              </el-form-item>
                <el-form-item label="验证码方式:" prop="verificationCode">
              
  <el-radio v-model="verificationCode.verificationCode" label="图形验证码">图形验证码</el-radio>
  <el-radio v-model="verificationCode.verificationCode" label="滑动验证码">滑动验证码</el-radio>
              </el-form-item>
                <el-form-item label="图形验证码宽度:" prop="graphicsWidth">
                <el-input @change="graphicsWidthUpdate" v-model.number="verificationCode.graphicsWidth"></el-input>
                <div class="font-size">验证码图片的宽度，范围在 40～145 之间</div>
              </el-form-item>
              
               <el-form-item label="图形验证码高度:" prop="graphicsHeight">
                <el-input @change="graphicsHeightUpdate" v-model.number="verificationCode.graphicsHeight"></el-input>
                  <div class="font-size">验证码图片的高度，范围在 15～50 之间</div>
              </el-form-item>

              <el-form-item label="图形验证码内容大小:" prop="graphicsContent">
               <el-input @change="graphicsContentUpdate" v-model.number="verificationCode.graphicsContent"></el-input>
                  <div class="font-size">验证码图片的高度，范围在 16～20 之间</div>
              </el-form-item>
                <el-form-item label="图形验证码位数:" prop="graphicsNum">
               <el-input @change="graphicsNumUpdate" v-model.number="verificationCode.graphicsNum"></el-input>
                  <div class="font-size">图形验证码位数，范围4-6之间</div>
              </el-form-item>
             
               <el-form-item label="图形验证码预览:">
                   <div :style="verificationStyle" style="text-align: center;background-color:#F3FBFE;" v-text="verificationContent"></div>
              </el-form-item>
              <el-form-item class="button-center">
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
</template>

<style>
  /* 自定义 */
.font-size{
  font-size: 8px;
  line-height:18px;
}
.UserListRedact-mokuai {
  height:1000px;
  background-color: rgb(249, 249, 249);
  padding-top: 30px;
}
.accounts-index {
  width: 80%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.accounts-name {
  width: 100%;
  height: 40px;
  background-color: rgb(240, 240, 240);
}
.accounts-name-font {
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 14px;
}
.UserListRedact-content {
  width: 100%;
  height:850px;
}

.codeSet-setting {
  margin-top: 20px;
  margin-left: 25%;
  width: 50%;
}

.button-center {
  margin-left: 20%;
}
</style>

<script>
    import goodImgeListApi from "@/api/goods/imagelist";
  export default {
    data() {
        var validateSize = (rule, value, callback) => {
            const reg =/^([1][6789]|20)$/;
            if(value==''||value==undefined||value==null){
                callback();
            }else{
                if (!reg.test(value)){
                    callback(new Error('请输入范围之内的数字'));
                } else {
                    callback();
                }
            }
        }
        var validateNum = (rule, value, callback) => {
            const reg =/^[456]$/;
            if(value==''||value==undefined||value==null){
                callback();
            }else{
                if (!reg.test(value)){
                    callback(new Error('请输入范围之内的数字'));
                } else {
                    callback();
                }
            }
        }
        var validateHeight = (rule, value, callback) => {
            const reg =/^((1[5-9])|([234][0-9])|(50))$/;
            if(value==''||value==undefined||value==null){
                callback();
            }else{
                if (!reg.test(value)){
                    callback(new Error('请输入范围之内的数字'));
                } else {
                    callback();
                }
            }
        }
        var validateWidth = (rule, value, callback) => {
            const reg =/^(([4-9][0-9])|(1[0-3][0-9])|(14[0-5]))$/;
            if(value==''||value==undefined||value==null){
                callback();
            }else{
                if (!reg.test(value)){
                    callback(new Error('请输入范围之内的数字'));
                } else {
                    callback();
                }
            }
        }
      return {
          requestUrl:goodImgeListApi.getRequestUrl().defaults.baseURL+'/api-sys/verification-code/',
      // 表单
          verificationStyle:'width:40px;height:15px;font-size:16px;line-height:15px',
      verificationContent:'abcd',
      verificationCode: {
          enableVerification: ['新用户注册','用户登录','发表相关评论','后台系统登录'],
          loginFailure:"关闭",
          verificationCode:"图形验证码",
          graphicsWidth: "40",
          graphicsHeight:"15",
          graphicsContent: "16",
          graphicsNum:"4"
      },
      rules: {
          enableVerification: [{required: true, message: '请输入启用验证码', trigger: 'blur'}],
          loginFailure: [{required: true, message: '请输入登录失败时显示验证码', trigger: 'blur'}],
          verificationCode: [{required: true, message: '请输入验证码方式', trigger: 'blur'}],
          graphicsWidth: [
              {required: true, message: '请输入图形验证码宽度', trigger: 'blur'},
              {validator:validateWidth,trigger: 'blur'}
          ],
          graphicsHeight: [
              {required: true, message: '请输入图形验证码高度', trigger: 'blur'},
              {validator:validateHeight,trigger: 'blur'}
          ],
          graphicsContent: [
              {required: true, message: '请输入图形验证码内容大小', trigger: 'blur'},
              {validator:validateSize,trigger: 'blur'}
          ],
          graphicsNum: [
              {required: true, message: '请输入图形验证码位数', trigger: 'blur'},
              {validator:validateNum,trigger: 'blur'}
          ]
      }
             
      };

     
    },
    methods: {
        graphicsWidthUpdate(){
            const reg =/^(([4-9][0-9])|(1[0-3][0-9])|(14[0-5]))$/;
            if (!reg.test(this.verificationCode.graphicsWidth)){
                return;
            }
            let styles = this.verificationStyle.split(";");
            this.verificationStyle='';
            styles.forEach((item, index) => {
               if(item.indexOf("width")!=-1){
                   this.verificationStyle+='width:'+this.verificationCode.graphicsWidth+"px;";
               }else{
                   this.verificationStyle+=item+";";
               }
            });
        },
        graphicsHeightUpdate(){
            const reg =/^((1[5-9])|([234][0-9])|(50))$/;
            if (!reg.test(this.verificationCode.graphicsHeight)){
                return;
            }
            let styles = this.verificationStyle.split(";");
            this.verificationStyle='';
            styles.forEach((item, index) => {
                if(item.indexOf("line-height")!=-1){
                    this.verificationStyle+='line-height:'+this.verificationCode.graphicsHeight+"px;";
                }else if(item.indexOf("height")!=-1){
                    this.verificationStyle+='height:'+this.verificationCode.graphicsHeight+"px;";
                }else {
                    this.verificationStyle+=item+";";
                }
            });
        },
        graphicsContentUpdate(){
            const reg =/^([1][6789]|20)$/;
            if (!reg.test(this.verificationCode.graphicsContent)){
               return;
            }
            let styles = this.verificationStyle.split(";");
            this.verificationStyle='';
            styles.forEach((item, index) => {
                if(item.indexOf("font-size")!=-1){
                    this.verificationStyle+='font-size:'+this.verificationCode.graphicsContent+"px;";
                }else {
                    this.verificationStyle+=item+";";
                }
            });
        },
        graphicsNumUpdate(){
            const reg =/^[456]$/;
            if (!reg.test(this.verificationCode.graphicsNum)){
                return;
            }
            if(this.verificationCode.graphicsNum=='4'){
                this.verificationContent="abcd"
            }else if(this.verificationCode.graphicsNum=='5'){
                this.verificationContent="abcde"
            }else if(this.verificationCode.graphicsNum=='6'){
                this.verificationContent="abcdef"
            }
        },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
            let param = new FormData(); //创建form对象
            param.append('enableVerification',this.verificationCode.enableVerification.join(','));
            param.append('loginFailure',this.verificationCode.loginFailure);
            param.append('verificationCode2',this.verificationCode.verificationCode);
            param.append('graphicsWidth',this.verificationCode.graphicsWidth);
            param.append('graphicsHeight',this.verificationCode.graphicsHeight);
            param.append('graphicsContent',this.verificationCode.graphicsContent);
            param.append('graphicsNum',this.verificationCode.graphicsNum);
            this.axios.post(this.requestUrl+"save",param).then((response) => {
                if(response.data.code == 0){
                    this.$message({
                        type: 'success',
                        message: response.data.msg
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: response.data.msg
                    });
                }
            });
        } else {
          return false
        }
      })
    },
        initData(){
            this.axios.get(this.requestUrl+"get?token=1").then((response) => {
                if(response.data.code == 0){
                    if(response.data.data !=null && response.data.data.id!=undefined){
                        this.verificationCode = response.data.data;
                        this.verificationCode.enableVerification = response.data.data.enableVerification !=''? response.data.data.enableVerification.split(','):[];
                        this.verificationStyle='width:'+this.verificationCode.graphicsWidth+'px;height:'+this.verificationCode.graphicsHeight+'px;font-size:'+this.verificationCode.graphicsContent+'px;line-height:'+this.verificationCode.graphicsHeight+'px';

                    }
                }
            })
        }
    },
  mounted() {
      this.initData();
  }
  
  };
</script>